<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <button id="btn-change">change</button>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
    <script type="text/javascript">
      const data = [
        {
          name: '张三',
          age: '20',
          address: '北京'
        },
        {
          name: '李四',
          age: '21',
          address: '上海'
        },
        {
          name: '王五',
          age: '22',
          address: '广州'
        }
      ]
      // 渲染函数
      function render(data) {
        const $container = $('#container')
        $container.html('') // 清空容器！
        const $table = $('<table>') // 拼接 table 标签
        $table.append($('<tr><td>name</td><td>age</td><td>address</td>/tr>'))
        data.forEach(item => {
          $table.append($('<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.address + '</td>/tr>'))
        })
        // 渲染到页面
        $container.append($table)
      }
      $('#btn-change').click(() => {
        data[1].age = 30
        data[2].address = '深圳'
        // re-render  再次渲染
        render(data)
      })
      // 页面加载完立刻执行（初次渲染）
      render(data)
    </script>
  </body>
</html>
